<template>
  <div class="update-info-container">
    <div class="info-card">
      <div class="user-info-header">
        <el-avatar :size="80" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
        <div class="user-info-text">
          <h2>修改个人信息</h2>
          <p>管理您的账号信息，保障账户安全</p>
        </div>
      </div>

      <el-divider />

      <el-form
          ref="infoForm"
          :model="userInfo"
          :rules="formRules"
          label-width="120px"
          class="update-form"
          label-position="top"
      >
        <div class="form-section">
          <div class="section-header">
            <el-icon><UserFilled /></el-icon>
            <h3>基本信息</h3>
          </div>

          <el-form-item label="用户名" prop="username">
            <el-input v-model="userInfo.username" placeholder="请输入您的用户名">
              <template #prefix>
                <el-icon><User /></el-icon>
              </template>
            </el-input>
          </el-form-item>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="姓名" prop="name">
                <el-input v-model="userInfo.name" placeholder="请输入您的真实姓名" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="职位" prop="position">
                <el-select v-model="userInfo.position" placeholder="请选择您的职位">
                  <el-option label="系统管理员" value="admin" />
                  <el-option label="影院经理" value="manager" />
                  <el-option label="票务主管" value="ticket_manager" />
                  <el-option label="营销专员" value="marketing" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <div class="form-section">
          <div class="section-header">
            <el-icon><Message /></el-icon>
            <h3>联系方式</h3>
          </div>

          <el-form-item label="邮箱" prop="email">
            <el-input v-model="userInfo.email" placeholder="请输入您的邮箱">
              <template #prefix>
                <el-icon><Message /></el-icon>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item label="手机号码" prop="phone">
            <el-input v-model="userInfo.phone" placeholder="请输入您的手机号码">
              <template #prefix>
                <el-icon><Iphone /></el-icon>
              </template>
            </el-input>
          </el-form-item>
        </div>

        <div class="form-section">
          <div class="section-header">
            <el-icon><Lock /></el-icon>
            <h3>账号安全</h3>
            <el-button
                type="primary"
                @click="goToResetPassword"
                class="reset-btn"
            >
              重置密码
            </el-button>
          </div>

          <el-form-item label="密码更新时间">
            <el-tag type="warning">1个月前</el-tag>
            <el-button type="text" class="reset-link" @click="navigateToResetPassword">前往重置密码</el-button>
          </el-form-item>

          <el-form-item label="登录提醒">
            <el-switch
                v-model="userInfo.loginNotification"
                active-text="开启"
                inactive-text="关闭"
            />
          </el-form-item>
        </div>

        <el-divider />

        <div class="form-actions">
          <el-button type="primary" @click="submitForm('infoForm')" :loading="saving">保存更改</el-button>
          <el-button @click="resetForm">重置</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    goToResetPassword() {
      this.$router.push('/reset-password');
    }
  }
}
</script>

<script setup>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

const router = useRouter();

// 用户信息数据
const userInfo = reactive({
  username: 'wyadmin',
  name: '王经理',
  position: 'manager',
  email: 'admin@wuyuecinema.com',
  phone: '13800138000',
  loginNotification: true
});

// 表单验证规则
const formRules = reactive({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur' }
  ],
  name: [
    { required: true, message: '请输入您的姓名', trigger: 'blur' }
  ],
  position: [
    { required: true, message: '请选择职位', trigger: 'change' }
  ],
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
  ],
  phone: [
    { required: true, message: '请输入手机号码', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号码', trigger: 'blur' }
  ]
});

const saving = ref(false);

// 提交表单
const submitForm = (formName) => {
  saving.value = true;

  // 模拟提交请求延迟
  setTimeout(() => {
    saving.value = false;
    ElMessage.success('个人信息更新成功');
    // 在实际应用中，这里可以添加API调用
    // updateUserInfo(userInfo).then(response => {
    //   saving.value = false;
    //   ElMessage.success('个人信息更新成功');
    // }).catch(error => {
    //   saving.value = false;
    //   ElMessage.error('更新失败，请重试');
    // });
  }, 1500);
};

// 重置表单
const resetForm = () => {
  userInfo.username = 'wyadmin';
  userInfo.name = '王经理';
  userInfo.position = 'manager';
  userInfo.email = 'admin@wuyuecinema.com';
  userInfo.phone = '13800138000';
  userInfo.loginNotification = true;
};

// 前往重置密码页面
const navigateToResetPassword = () => {
  router.push('/resetPassword');
};
</script>

<style scoped>
.update-info-container {
  padding: 20px;
  background-color: #f8f9fc;
  min-height: calc(100vh - 65px);
}

.info-card {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  padding: 30px;
  max-width: 800px;
  margin: 0 auto;
}

.user-info-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.user-info-text {
  margin-left: 20px;
}

.user-info-text h2 {
  margin: 0;
  font-size: 24px;
  color: #333;
}

.user-info-text p {
  margin: 5px 0 0;
  color: #888;
  font-size: 14px;
}

.form-section {
  margin-bottom: 30px;
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.section-header h3 {
  margin: 0 0 0 10px;
  font-size: 18px;
  color: #333;
}

.form-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.reset-link {
  margin-left: 15px;
  color: #800000; /* Maroon color */
  font-size: 13px;
}

.el-divider {
  margin: 25px 0;
}

:deep(.el-form-item__label) {
  font-weight: 500;
  margin-bottom: 8px;
  color: #555;
}

.el-avatar {
  background-color: #800000; /* Maroon color */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
}

/* Maroon主题按钮样式 */
:deep(.el-button--primary) {
  background-color: #800000 !important; /* Maroon color */
  border-color: #800000 !important; /* Maroon color */
}

:deep(.el-button--primary:hover),
:deep(.el-button--primary:focus) {
  background-color: #8B0000 !important; /* Darker maroon */
  border-color: #8B0000 !important; /* Darker maroon */
}

.reset-btn {
  margin-top: 15px;
  background: linear-gradient(135deg, #800000, #5a0000); /* Maroon gradient */
  border: none;
  box-shadow: 0 4px 10px rgba(128, 0, 0, 0.2);
  transition: all 0.3s;
}

.reset-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(128, 0, 0, 0.3);
  background: linear-gradient(135deg, #8B0000, #650000); /* Darker maroon gradient */
}

/* 表单主要按钮悬停效果 */
.form-actions .el-button--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(128, 0, 0, 0.3);
}

/* 重置密码链接悬停效果 */
.reset-link:hover {
  color: #8B0000; /* Darker maroon */
  text-decoration: underline;
}
</style>